<template>
  <div class="form-valid-demo">
    <h3 class="title">三种排版以及验证</h3>
    <div>
      <d-form ref="form" :label-width="110" :mode="mode" :model="data" :rules="validationRules" :top="0.2" show-error-tip>
        <d-form-item label="Input" prop="inputData">
          <input type="text" v-model="data.inputData" placeholder="只能输入15，限制输入30个字" />
          <template slot="error" slot-scope="scope">
            <!-- *type*: base, combine, async -->
            <span class="link" v-if="scope.props.type === 'async'" @click="open">
              +++++++自定义的错误提示+++++++
            </span>
          </template>
        </d-form-item>
        <d-form-item label="Integer" prop="intData">
          <d-slider v-model="data.intData"></d-slider>
        </d-form-item>
        <d-form-item label="Mail" prop="emailData">
          <input type="text" v-model="data.emailData" />
        </d-form-item>
        <d-form-item label="URL" prop="urlData">
          <input type="text" v-model="data.urlData" />
        </d-form-item>
        <d-form-item label="Cellphone" prop="telData">
          <input type="text" v-model="data.telData" />
        </d-form-item>
        <d-form-item label="Phone" prop="mobileData">
          <input type="text" v-model="data.mobileData" />
        </d-form-item>
        <d-form-item label="Textarea" prop="textareaData" :single="true">
          <textarea rows="3" v-autosize v-model="data.textareaData"></textarea>
        </d-form-item>
        <d-form-item :no-padding="true" single>
          <d-button color="primary" :loading="isLoading" @click="submit" v-tooltip content="执行异步验证但是不等待结果">提交</d-button>
          <i class="d-split"></i>
          <d-button color="green" :loading="isLoading" @click="submitAsync" v-tooltip content="等待所有异步验证都执行完才执行">异步提交</d-button>
          <i class="d-split"></i>
          <d-button @click="reset">清除验证</d-button>
        </d-form-item>
      </d-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'formValidDemo',
  data () {
    return {
      mode: 'single',
      data: {
        inputData: '',
        intData: null,
        urlData: null,
        emailData: null,
        telData: null,
        mobileData: null,
        textareaData: '测试'
      },
      isLoading: false,
      validationRules: {
        rules: {
          textareaData: {
            maxLen: 50,
            minLen: 10
          },
          inputData: {
            // 这里的判断不会影响最终的valid结果，所以也可以作为一些验证提示
            validAsync (value, next, parent, data) {
              console.log(value)
              setTimeout(() => {
                // eslint-disable-next-line eqeqeq
                if (value == 15) {
                  next()
                } else {
                  next('ID不等于15')
                }
              }, 1000)
            }
          }
        },
        required: [
          'inputData',
          'intData',
          'urlData',
          'emailData',
          'telData',
          'mobileData',
          'textareaData'
        ],
        int: ['intData'],
        url: ['urlData'],
        email: ['emailData'],
        tel: ['telData'],
        mobile: ['mobileData']
      }
    }
  },
  mounted () {
    this.data.inputData = '20'
    this.data.intData = 10
    this.data.urlData = 'http://www.baidu.com'
    this.data.emailData = '762902674@qq.com'
    this.data.telData = '6212003'
    this.data.mobileData = '13450266440'
    this.data.textareaData = '测试12345678'
  },
  methods: {
    submit () {
      const validResult = this.$refs.form.valid()
      if (validResult.result) {
        this.$Message('验证成功')
      }
    },
    submitAsync () {
      this.isLoading = true
      this.$refs.form.validAsync().then(result => {
        if (result.result) {
          this.$Message('验证成功')
        }
        this.isLoading = false
      })
    },
    open () {
      this.$Message('我要去做特殊的处理')
    },
    reset () {
      this.isLoading = false
      this.$refs.form.resetValid()
    }
  }
}
</script>

<style lang="stylus" scoped>
// .form-valid-demo
</style>
